<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    window.onload = function () {
        var first = document.getElementById('one');
        var aIpt1 = first.getElementsByTagName('input');
        var aBtn1 = first.getElementsByTagName('button');
        aBtn1[0].onclick = function () {
            var n1 = aIpt1[0].value;
            var n2 = aIpt1[1].value;
            if (n1 == '' || n2 == '' || isNaN(n1) || isNaN(n2)) {
                alert('输入有误，请重新输入数字');
            }
            else {
                alert(parseInt(n1) + parseInt(n2));
            }
        }
        aBtn1[1].onclick = function () {
            var n1 = aIpt1[2].value;
            var n2 = aIpt1[3].value;
            if (n1 == '' || n2 == '' || isNaN(n1) || isNaN(n2)) {
                alert('输入有误，请重新输入数字');
            }
            else {
                alert(n1 - n2);
            }
        }
        aBtn1[2].onclick = function () {
            var n1 = aIpt1[4].value;
            var n2 = aIpt1[5].value;
            if (n1 == '' || n2 == '' || isNaN(n1) || isNaN(n2)) {
                alert('输入有误，请重新输入数字');
            }
            else {
                alert(n1 * n2);
            }
        }
        aBtn1[3].onclick = function () {
            var n1 = aIpt1[6].value;
            var n2 = aIpt1[7].value;
            if (n1 == '' || n2 == '' || isNaN(n1) || isNaN(n2)) {
                alert('输入有误，请重新输入数字');
            }
            else {
                alert(n1 / n2);
            }
        }
        aBtn1[4].onclick = function () {
            var n1 = aIpt1[8].value;
            var n2 = aIpt1[9].value;
            if (n1 == '' || n2 == '' || isNaN(n1) || isNaN(n2)) {
                alert('输入有误，请重新输入数字');
            }
            else {
                alert(n1 % n2);
            }
        }

        var second = document.getElementById('two');
        var aBtn2 = second.getElementsByTagName('button');
        var aLi2 = second.getElementsByTagName('li');
        aBtn2[0].onclick = function () {
            for (var i = 0; i < aLi2.length; i++) {
                if (i % 2 == 0) {
                    aLi2[i].style.background = 'yellow';
                }
                else {
                    aLi2[i].style.background = 'red';
                }
            }
        }

        var third = document.getElementById('three');
        var aIpt3 = third.getElementsByTagName('input')[0];
        var aBtn3 = third.getElementsByTagName('button')[0];
        aBtn3.onclick = function () {
            var n = aIpt3.value;
            if (n == '' || isNaN(n)) {
                alert('输入有误，请重新输入数字');
            }
            else {
                alert(parseInt(n / 60) + '分钟' + n % 60 + '秒');
            }
        }

        var fourth = document.getElementById('four');
        var aIpt4 = fourth.getElementsByTagName('input')[0];
        var aBtn4 = fourth.getElementsByTagName('button')[0];
        aBtn4.onclick = function () {
            var n = aIpt4.value;
            if (n == '' || isNaN(n)) {
                alert('输入有误，请重新输入数字')
            }
            else {
                if (n > 9 && n < 100) {
                    alert('是两位数');
                }
                else {
                    alert('不是两位数');
                }
            }
        }
    }
</script>

<div id="one" class="box box-re">
    1、算术练习<br><br>
    <div class="box box-re form-inline">
        例1：求和<br>
        <input type="text" class="form-control"/> 加 <input type="text" class="form-control"/>
        <button class="btn btn-info">求和</button>
    </div>
    <div class="box box-re form-inline">
        例2：求差<br>
        <input type="text" class="form-control"/> 减 <input type="text" class="form-control"/>
        <button class="btn btn-info">求差</button>
    </div>
    <div class="box box-re form-inline">
        例3：求积<br>
        <input type="text" class="form-control"/> 乘 <input type="text" class="form-control"/>
        <button class="btn btn-info">求积</button>
    </div>
    <div class="box box-re form-inline">
        例4：求商<br>
        <input type="text" class="form-control"/> 除 <input type="text" class="form-control"/>
        <button class="btn btn-info">求商</button>
    </div>
    <div >
        例5：求模<br>
        <input type="text" class="form-control"/> 模 <input type="text" class="form-control"/>
        <button class="btn btn-info">求模</button>
    </div>
</div>
<div id="two" class="box box-re">
    <br>
    2、取模应用于隔行换色
    <br>
    <button class="btn btn-info">执行变色</button>
    <br><br>
    <ul class="list-group" style="list-style: none">
        <li class="list-group-item">隔行变色</li>
        <li class="list-group-item">隔行变色</li>
        <li class="list-group-item">隔行变色</li>
        <li class="list-group-item">隔行变色</li>
        <li class="list-group-item">隔行变色</li>
    </ul>
</div>
<div id="three" class="box box-re">
    3、求商取模应用于秒转时间<br><br>
    <br><br>
    <div class="box box-re form-inline">
        <input type="text" class="form-control" placeholder="单位(秒)"/>
        <button class="btn btn-info">秒转时间</button>
        <br>
    </div>
</div>

<div id="four" class="box box-re">
    4、判断是否为两位数<br><br>
    分析：输入数字大于9且小于100为两位数。<br><br>
    <div class="box box-re form-inline">
        <input type="text" class="form-control" placeholder="请输入数字"/>
        <button class="btn btn-info">判断</button>
        <br>
    </div>
</div>

<div id="Record" class="box box-re red">

</div>
</body>
</html>